<template>
  <view class="dynamic-tabbar" v-if="showTabBar">
    <view 
      class="tabbar-item" 
      v-for="item in authorizedTabBar" 
      :key="item.pagePath"
      :class="{ active: currentPath === item.pagePath }"
      @click="switchTab(item)"
    >
      <image 
        :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath" 
        class="tabbar-icon"
      />
      <text class="tabbar-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
import { getDynamicTabBarConfig } from '@/utils/menuPermission'

export default {
  name: 'DynamicTabBar',
  props: {
    currentPath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      authorizedTabBar: []
    }
  },
  computed: {
    showTabBar() {
      return this.authorizedTabBar.length > 0
    }
  },
  mounted() {
    this.initTabBar()
  },
  methods: {
    initTabBar() {
      try {
        this.authorizedTabBar = getDynamicTabBarConfig()
        console.log('动态TabBar初始化:', this.authorizedTabBar)
      } catch (error) {
        console.error('动态TabBar初始化失败:', error)
        // 使用默认配置
        this.authorizedTabBar = this.getDefaultTabBar()
      }
    },
    getDefaultTabBar() {
      return [
        {
          pagePath: 'pages/index/index',
          text: '首页',
          iconPath: 'static/icons/home.png',
          selectedIconPath: 'static/icons/home-active.png'
        },
        {
          pagePath: 'pages/services/services',
          text: '服务',
          iconPath: 'static/icons/service.png',
          selectedIconPath: 'static/icons/service-active.png'
        },
        {
          pagePath: 'pages/profile/index',
          text: '我的',
          iconPath: 'static/icons/profile.png',
          selectedIconPath: 'static/icons/profile-active.png'
        }
      ]
    },
    switchTab(item) {
      if (this.currentPath === item.pagePath) {
        return
      }
      
      // 使用uni.switchTab进行页面切换
      uni.switchTab({
        url: `/${item.pagePath}`,
        fail: (err) => {
          console.error('TabBar切换失败:', err)
          // 如果switchTab失败，尝试使用navigateTo
          uni.navigateTo({
            url: `/${item.pagePath}`,
            fail: (navErr) => {
              console.error('页面导航失败:', navErr)
              uni.showToast({
                title: '页面跳转失败',
                icon: 'error'
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.dynamic-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #ffffff;
  border-top: 2rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1000;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  transition: all 0.3s ease;
}

.tabbar-item.active {
  color: #2d8cf0;
}

.tabbar-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}

.tabbar-text {
  font-size: 24rpx;
  color: #666666;
  transition: color 0.3s ease;
}

.tabbar-item.active .tabbar-text {
  color: #2d8cf0;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .dynamic-tabbar {
    height: 100rpx;
  }
  
  .tabbar-icon {
    width: 40rpx;
    height: 40rpx;
  }
  
  .tabbar-text {
    font-size: 20rpx;
  }
}
</style>
